<template>
	<app-layout>
	<view class="tabPage">
		<view class="fixedTop">
			<view class="addressBox flex align-center" @click="chooseMap()">
				<image class="addressIcon" src="/static/image/WB/address.png"></image>
				<text style="font-size: 28upx;color: #888;">{{addressName}}</text>
				<image class="downIcon" src="/static/image/icon/icon-down.png"></image>
			</view>
			<!-- <view class="searchBox flex align-center">
				<image class="searchIcon" src="../../plugins/mch/static/image/search.png"></image>
				<text>搜索商企</text>
			</view> --> 
		</view> 
		<swiper class="swiper" circular autoplay indicator-dots>
			<swiper-item v-for="i in banner">
				<image mode="aspectFill" :src="i.pic_url"></image>
			</swiper-item>
		</swiper>
		<view class="menus flex align-center justify-between flex-wrap">
			<view class="menusItem flex flex-direction align-center" v-for="i in menus" @click="tocats(i)">
				<image :src="i.logo"></image>
				<text>{{i.name}}</text>
			</view>
		</view>
		<view v-if="list.length>0" class="shopTitle flex align-center justify-between" style="margin-bottom: 10upx;">
			<view class="lineTitle" style="font-size: 30upx;">附近商企</view>
			<view @click="shopList">
				<text style="font-size: 22upx;color: #888;">更多</text>
				<image class="rightLogo" src="../app_admin/image/arrow-right.png"></image>
			</view>
		</view>
		<!-- <shopclass></shopclass> -->
		<block v-for="i in list">
			<nearshop :datas="i"></nearshop>
		</block>
		<view v-if="circle.length>0"  class="shopTitle flex align-center justify-between">
			<view class="lineTitle" style="font-size: 30upx;">广场商圈</view>
			<view @click="squareList">
				<text style="font-size: 22upx;color: #888;">更多</text>
				<image class="rightLogo" src="../app_admin/image/arrow-right.png"></image>
			</view>
		</view>
		<scroll-view scroll-x class="squareBox">
			<block v-for="i in circle">
				<square :datas="i" :lat="latitude" :lng="longitude"></square>
			</block>
		</scroll-view>
	</view>
	</app-layout>
</template>

<script>
	import nearshop from './components/shop.vue'
	import square from './components/square.vue'
	import shopclass from './components/shopClass.vue'
	import {get,getdistance} from '@/utils/post.js'
	export default {
		components:{
			nearshop,
			shopclass,
			square
		},
		data() {
			return {
				addressName:'',
				list:[],
				menus:[],
				circle:[],
				latitude:'',
				longitude:'',
				banner:[]
			};
		},
		onLoad(options) {
			this.getAddress()
			this.getMenus()
			this.getBanner()
		},
		onShow(){
			if(this.$config.loc){
				var loc = {...this.$config.loc}
				console.log(loc)
				this.latitude = loc.latlng.lat
				this.longitude = loc.latlng.lng
				this.addressName = loc.poiaddress
				this.getShopList()
				this.getcircle()
				this.list = []
				this.circle = []
			}
		},
		onHide(){
			this.$config.loc = ''
		},
		onUnload(){
			this.$config.loc = ''
		},
		methods: {
			getAddress(){
				var that = this
				//#ifdef H5
				this.addressName = '定位中...'
				this.$wx.getlocation(res => {
					that.latitude = res.latitude
					that.longitude = res.longitude
					that.reAddress()
					that.getShopList()
					this.getcircle()
				},()=>{
					this.getAddress()
				})
				//#endif
			},
			getBanner(){
				this.$request({
					url: this.$api.nearby.banner,
					data: {}
				}).then(info => {
					if (info.code == 0) {
						this.banner = info.data
					}
				}).catch(info => {})
			},
			getMenus(){
				this.$request({
					url: this.$api.nearby.cats,
					data: {}
				}).then(info => {
					if (info.code == 0) {
						this.menus = info.data
					}
				}).catch(info => {})
			},
			getShopList(){
				uni.showLoading({
					title: '加载中'
				});
				var data = {
					page:1,
					latitude: this.latitude,
					longitude: this.longitude,
					// latitude: 28.22778,
					// longitude: 112.93886
					limit:4
				}
				this.$request({
					url: this.$api.nearby.list,
					data: data
				}).then(info => {
					uni.hideLoading()
					if (info.code == 0) {
						info.data.list.map(item => {
							item.distance = getdistance(item.latitude,item.longitude,this.latitude,this.longitude)
							this.list.push(item)
						})
					}
				}).catch(info => {
					uni.hideLoading()
				})
			},
			getcircle(){
				var data = {
					page:1,
					latitude: this.latitude,
					longitude: this.longitude,
					limit:6,
					mch_common_cat_id:''
				}
				this.$request({
					url: this.$api.nearby.circle,
					data: data
				}).then(info => {
					if (info.code == 0) {
						info.data.list.map(item => {
							item.distance = getdistance(item.latitude,item.longitude,this.latitude,this.longitude)
							this.circle.push(item)
						})
					}
				}).catch(info => {})
			},
			
			reAddress(re){
				var that = this
				if (re) {
					uni.showLoading({
						title: '定位中',
						mask: true
					})
					this.addressName = '定位中...'
				}
				//#ifdef H5
				//由经纬度反解城市信息
				var data = {
					location: this.latitude + "," + this.longitude
				}
				// var data = {
				// 	location: "28.12,112.59"
				// }
				get(this.$api.wx.map, data, false, res => {
					this.addressName = res.data.result.formatted_addresses.recommend
					if (re) {
						uni.hideLoading()
					}
				},fail=>{
					this.addressName = '定位失败，请重新定位';
					if (re) {
						uni.hideLoading()
					}
				})
				//#endif
			},
			chooseMap(){
				if(!this.latitude){
					return
				}
				uni.navigateTo({
					url:'/pages/WB/map?lat='+this.latitude+'&lng='+this.longitude
				})
			},
			loadData(id) {
				this.$request({
					url: '',
					data: {
						id: id
					}
				}).then(response => {
					if (response.code === 0) {
						this.topic = response.data.list
					}
				}).catch(e => {

				});
			},
			shopList(){
				uni.navigateTo({
					url:'/pages/WB/shopList?lat='+this.latitude+'&lng='+this.longitude
				})
			},
			squareList(){
				uni.navigateTo({
					url:'/pages/WB/moreSquare?lat='+this.latitude+'&lng='+this.longitude
				})
			},
			tocats(i){
				uni.navigateTo({
					url:'/pages/WB/shopList?lat='+this.latitude+'&lng='+this.longitude+'&catid='+i.id+'&name='+i.name
				})
			}
		}
	}
</script>

<style scoped>
	
	.squareBox{
		width: 700upx;
		margin: 20upx auto;
		white-space: nowrap;
		overflow: hidden;
	}
	.lineTitle{
		line-height: 34upx;
		border-left: 4px solid orange;
		padding-left: 20upx;
	}
	.rightLogo{
		width: 12upx;
		height: 22upx;
		vertical-align: middle;
		margin-left: 10upx;
	}
	.shopTitle{
		width: 700upx;
		margin: 30upx auto 0;
	}
	.menusItem{
		font-size: 24upx;
		color: #666;
		width: 20%;
		margin-top: 30upx;
	}
	.menusItem image{
		width: 70upx;
		height: 70upx;
		border-radius: 50%;
	}
	.menus{
		width: 700upx;
		margin: 0 auto;
	}
	.swiper image{
		width: 100%;
		height: 100%;
		border-radius: 10upx;
	}
	.swiper{
		width: 700upx;
		height: 270upx;
		margin: 0 auto;
		border-radius: 10upx;
		overflow: hidden;
	}
	.searchBox{
		width: 700upx;
		margin: 0 auto 20upx;
		background: #eee;
		height: 60upx;
		border-radius: 30upx;
		font-size: 28upx;
		padding: 0 20upx;
		color: #888;
	}
	.addressIcon,.searchIcon{
		width: 34upx;
		height: 34upx;
		margin-right: 20upx;
	}
	.downIcon{
		width: 27upx;
		height: 15upx;
		margin-left: 10upx;
	}
	.addressBox{
		padding: 20upx;
	}
	.fixedTop{
		position: fixed;
		background: #fff;
		left: 0;
		width: 100%;
		z-index: 100;
		/* #ifdef H5 */
		top: 0;
		/* #endif */
		/* #ifndef H5 */
		top: 0;
		/* #endif */
	}
	.tabPage{
		padding-top: 80upx;
	}
	page{
		background: #fff;
	}
</style>
